
【CSS】transition-duration - トランジションの時間
CSSのtransition-durationプロパティについて解説します。
検証環境
transition-duration
transition-durationは“トランジションの時間”のプロパティです。
基本構文
transition-duration: 値;
複数値はカンマ(,)で区切ります。
transition-duration: 値1, 値2, 値3;
サンプル
<style> input { background: red; position: relative; left: 0; transition-property: background, left; transition-duration: 2.0s, 4.0s; } input:focus { background: blue; left: 200px; } </style>
<input type="text">